<template>
    <div class="van-grid-box">
        <van-grid :border="false" square :column-num="props.columnNum">
            <van-grid-item v-for="(item, index) in props.menuList" :key="index" @click="onGoRoute(item)">
                <div class="grid-item">
                    <van-image :width="props.imagewidth" :height="props.imagewidth" fit="cover" :src="item.image" />
                </div>
                <div class="grid-text">
                    {{ item.name }}
                </div>
            </van-grid-item>
        </van-grid>
    </div>

</template>

<script setup>
let props = defineProps({
    menuList: {
        type: Array,
        default:()=>[]
    },
    columnNum:{
        type: Number,
        default:5
    },
    imagewidth:{
        type:String,
        default:'8vw'
    }
});

const emit = defineEmits(['goRoute'])
const onGoRoute = (item) => {
    emit("goRoute", item)
}

</script>

<style lang="scss" scoped>
.van-grid-box{background-color: var(--white);border-radius: 10px;}
.grid-item {
    width: 60px;height: 60px; text-align: center;
    padding: 10px;
}
.grid-text{
    padding-bottom: 20px;
}
</style>